<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-m" scroll-with-animation :scroll-left="scrollMLeft">
				<view @click="scrollMLeftFn(i)" v-for="(m,i) in months" :key="m" :class="['month-normal scroll-item scroll-item-m',month == i?'month-active':'']">
					{{m.label}}
				</view>
		</scroll-view>
		<scroll-view scroll-x="true" class="scroll-d" scroll-with-animation :scroll-left="scrollDLeft">
				<view @click="scrollDLeftFn(i)" v-for="(d,i) in days" :key="d" :class="['day-normal scroll-item scroll-item-d',day == i+1?'day-active':'']">
					{{d.label}}
					<view class="dots">
						<view class="dot todo3"></view>
						<view class="dot todo2"></view>
						<view class="dot todo1"></view>
					</view>
				</view>
		</scroll-view>
		<!-- <c-panel></c-panel> -->
	</view>
</template>

<script>
	export default {
		name:"c-calendar",
		data() {
			return {
				months: [
					{
						label: "Jan"
					},
					{
						label: "Feb"
					},
					{
						label: "March"
					},
					{
						label: "April"
					},
					{
						label: "May"
					},
					{
						label: "June"
					},
					{
						label: "July"
					},
					{
						label: "Aug"
					}, 
					{
						label: "Sept"
					},
					{
						label: "Oct"
					},
					{
						label: "Nov"
					},
					{
						label: "Dec"
					}
				],
				days: [], // 本月天数,值为1-31
				day: 0,
				weekday: 1, // 星期几,值为1-7
				month: 0,
				scrollMLeft: 0,
				scrollDLeft: 0,
				scrollWidth: [0, 0]
			};
		},
		created() {
			this.init()
			this.getScrollW()
		},
		methods: {			
			init() {
				let now = new Date()
				this.year = now.getFullYear()
				this.month = now.getMonth()
				this.day = now.getDate()
				this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
				
				const [days, day_arr] = this.getMonthDay(this.year, this.month)
				this.weekday = this.getWeekday(this.year, this.month, this.day)
				this.days = day_arr

			},
			//生成数组
			generateArray: function(start, end) {
				return Array.from(new Array(end + 1).keys()).slice(start);
			},
			//从后往前数取日期范围
			getRangeDay(day, days, num = 5) {
				if(day + num >= days) return 
			},
			//一个月有多少天
			getMonthDay(year, month) {
				let days = new Date(year, month, 0).getDate();
				const day_arr = []
				for(let i = 0; i < days; i++) {
					day_arr.push({ label: i+1 })
				}
				return [days, day_arr];
			},
			//一周中的第几天
			getWeekday(year, month, day) {
				let date = new Date(`${year}/${month}/${day} 00:00:00`);
				return date.getDay();
			},
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll-m').boundingClientRect(r => {
					this.scrollWidth[0] = r.width
				}).exec();
				query.selectAll('.scroll-item-m').boundingClientRect(data => {
					let dataLen = data.length
					for (let i = 0; i < dataLen; i++) {
						this.months[i].left = data[i].left
						this.months[i].width = data[i].width
					}
					this.scrollMLeftFn(this.month)
				}).exec()

				query.select('.scroll-d').boundingClientRect(r => {
					this.scrollWidth[1] = r.width
				}).exec();
				query.selectAll('.scroll-item-d').boundingClientRect(data => {
					let dataLen = data.length
					for (let i = 0; i < dataLen; i++) {
						this.days[i].left = data[i].left
						this.days[i].width = data[i].width
					}
					this.scrollDLeftFn(this.day)
				}).exec()
			},
			scrollMLeftFn(index) {
				this.scrollMLeft = this.months[index].left - this.scrollWidth[0] / 2 + this.months[index].width / 2;
			},
			scrollDLeftFn(index) {
				this.scrollDLeft = this.days[index].left - this.scrollWidth[1] / 2 + this.days[index].width / 2;
			}
		}
	}
</script>

<style lang="scss">
.scroll-m, .scroll-d {
		white-space: nowrap;
		.scroll-item {
			display: inline-block;
			text-align: center;
			vertical-align: middle;
		}
		.scroll-item:first-child {
			margin-left: 50rpx;
		}
		.scroll-item:nth-last-child(1) {
			margin-right: 50rpx;
		}
		.month-normal {
			margin: 25rpx 32rpx;
			font-family: Roboto;
			font-size: 24rpx;
			line-height: 42rpx;
			color: #838690;
		}
		.month-active {
			color: #15192a;
			background-image: url(../../static/bg.png);
			background-size: 32rpx;
			background-position: 70% bottom;
			background-repeat: no-repeat;
		}
		.day-active {
			background-color: #7727ff !important;
			box-shadow: 6rpx 6rpx 12rpx 0rpx #dde4ef, -6rpx -6rpx 12rpx -3rpx #dde4ef;
			color: #FFFFFF;
		}
		.day-normal {
			margin: 20rpx 20rpx;
			width: 100rpx;
			height: 100rpx;
			background-color: #f0f3f6;
			box-shadow: 6rpx 6rpx 12rpx 0rpx #dde4ef, -6rpx -6rpx 12rpx -3rpx #FFF;
			border-radius: 20rpx;
			
			font-family: Rubik;
			font-size: 36rpx;
			letter-spacing: 0rpx;
			line-height: 90rpx;
		}
	}
	.dots {
		display: flex;
		justify-content: center;
		margin-top: -24rpx;
	}
	.dot {
		content: "";
		width: 9rpx;
		height: 9rpx;
		margin: 2rpx;
		border-radius: 9rpx;
	}
	
	.todo1 {
		background-color: #7727ff;
	}
	.todo2 {
		background-color: #ae80ff;
	}
	.todo3 {
		background-color: #dfccff;
	}
</style>
